<template>
  <main class="main-container">
    <div class="list">
      <div>销售总额：￥<el-statistic :value="totalSalesOutput" /></div>
      <div>订单总数：<el-statistic :value="totalOrdersOutput" /></div>
      <div>用户总数：<el-statistic :value="totalUsersOutput" /></div>
    </div>
    <div ref="saleChart" style="height: 500px; margin-top: 40px"></div>
    <div ref="userChart" style="height: 500px"></div>
  </main>
</template>
<script setup lang="ts">
import { totalPrice, salesByDay, totalOrders as to } from "@/api/order";
import { getRegistrationsByDay, getTotalUsers } from "@/api/user";
import { ElLoading } from "element-plus";
import { useTransition } from "@vueuse/core";
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const totalUsers = ref(0);
const totalOrders = ref(0);
const totalSales = ref(0);
const salesData = ref<
  {
    dailySales: number;
    day: string;
  }[]
>([]);
const registrationsData = ref<
  {
    dailyRegistrations: number;
    day: string;
  }[]
>([]);

const userChart = ref();
const saleChart = ref();
const totalUsersOutput = useTransition(totalUsers, {
  duration: 1500,
});
const totalOrdersOutput = useTransition(totalOrders, {
  duration: 1500,
});
const totalSalesOutput = useTransition(totalSales, {
  duration: 1500,
});

const getData = async () => {
  let service = ElLoading.service();
  registrationsData.value = await getRegistrationsByDay();
  salesData.value = await salesByDay();

  totalUsers.value = await getTotalUsers();
  totalOrders.value = await to();
  totalSales.value = await totalPrice();
  service.close();
};

onMounted(async () => {
  await getData();
  //   销售额
  let sale = echarts.init(saleChart.value);
  // 配置 X 轴和 Y 轴的数据
  var dates = salesData.value.map((item) => item.day);
  var sales = salesData.value.map((item) => item.dailySales);

  // 设置图表的配置项
  let option = {
    title: {
      text: "近30日销售额统计",
    },
    tooltip: {
      trigger: "axis",
      formatter: function (params: any) {
        let result = params[0].name + "<br/>";
        params.forEach(function (item: any) {
          result += item.marker + " ￥" + item.value + " 元<br/>";
        });
        return result;
      },
    },
    xAxis: {
      type: "category",
      data: dates,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} 元",
      },
    },
    series: [
      {
        data: sales,
        type: "line",
        smooth: false,
      },
    ],
  };
  sale.setOption(option);
  //   用户量
  let user = echarts.init(userChart.value);
  // 配置 X 轴和 Y 轴的数据
  var userDates = registrationsData.value.map((item) => item.day);
  var users = registrationsData.value.map((item) => item.dailyRegistrations);

  // 设置图表的配置项
  let option2 = {
    title: {
      text: "近30日用户注册量统计",
    },
    tooltip: {
      trigger: "axis",
      formatter: function (params: any) {
        let result = params[0].name + "<br/>";
        params.forEach(function (item: any) {
          result += item.marker + " " + item.value + " 人<br/>";
        });
        return result;
      },
    },
    xAxis: {
      type: "category",
      data: userDates,
    },
    yAxis: {
      type: "value",
      minInterval: 1,
    },
    series: [
      {
        data: users,
        type: "line",
        smooth: false,
      },
    ],
  };
  user.setOption(option2);
});
</script>
<style scoped lang="less">
.list {
  display: flex;
  height: 100px;
  border: 1px solid #ccc;
  & > div {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    border-right: 1px solid #ccc;
    &:last-child {
      border-right: none;
    }
  }
}
</style>
